<template>
  <cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" :data-content="selectedColor">
    <cover-view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
      <cover-image class="item-img" :src="item.icon_a" v-if="current == index"></cover-image>
      <cover-image class="item-img" :src="item.icon" v-else></cover-image>
      <cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{ item.text }}
      </cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
import {getRole} from "@/common/auth";

export default {
  props: {
    current: String
  },
  data() {
    return {
      paddingBottomHeight: 0, //苹果X以上手机底部适配高度
      selectedColor: "#FB766A",
      list: [],
      listOriginal: [{
        text: '接单',
        icon: '/static/tabbar/biaodan.png',
        icon_a: '/static/tabbar/biaodan-ac.png',
        path: "/pages/bgHome/bgHome",
        role: 'em'
      },
        {
          text: '我的',
          icon: '/static/tabbar/dongjie.png',
          icon_a: '/static/tabbar/dongjie-ac.png',
          path: "/pages/bgMine/bgMine",
          role: 'em'
        },
        {
          path: "/pages/home/home",
          icon: "/static/tabbar/home.png",
          icon_a: "/static/tabbar/homeActive.png",
          text: "外卖",
          role: 'user'
        },
        {
          path: "/pages/order/order",
          icon: "/static/tabbar/order.png",
          icon_a: "/static/tabbar/orderActive.png",
          text: "订单",
          role: 'user'
        },
        {
          path: "/pages/mine/mine",
          icon: "/static/tabbar/mine.png",
          icon_a: "/static/tabbar/mineActive.png",
          text: "我的",
          role: 'user'
        }]
    };
  },
  created() {
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
        model.forEach(item => {
          //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
          if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
            that.paddingBottomHeight = 40;
          }
        })
      }
    });
    this.listOriginal.forEach(item => {
      if (item.role === (getRole()))
        that.list.push(item)
    })
    if (getRole() === 'em') {
      that.selectedColor = '#3CB79A'
    }
    document.documentElement.style.setProperty('--selectedColor', that.selectedColor);
  },
  watch: {},
  methods: {
    tabbarChange(path) {
      console.log(path)
      uni.switchTab({
        url: path
      });
    }
  }
};
</script>

<style lang="scss" scoped>

.tabbarActive {
  color: var(--selectedColor, #FB766A) !important;
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100rpx;
  background-color: #F7F7F7;
  z-index: 99;

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100rpx;

    .item-img {
      margin-bottom: 4rpx;
      width: 46rpx;
      height: 46rpx;
    }

    .item-name {
      font-size: 26rpx;
      color: #B3C0C7;
    }
  }
}
</style>